<template>
  <!-- 
    新增编辑组件
    仅仅展示UI试图组件，不参与任何的逻辑编辑
   -->
  <el-dialog custom-class="add-and-edit-area-ui" :close-on-click-modal="false" center top="5vh"
    :title="dialogForm.title" :visible.sync="dialogForm.dialogVisible" width="75%">
    <el-form label-position="right" label-suffix=":" label-width="120px" :model="dialogForm.form" :rules="rules"
      ref="AddAndEditAreaUIRef">
      <el-card class="mb20">
        <!-- <div class="info">车辆信息</div> -->
        <el-form-item label="区域名称" prop="areaName"><el-input v-model="dialogForm.form.areaName"
            clearable></el-input></el-form-item>
        <el-form-item label="车位数（个）" prop="spaceNumber"><el-input v-model="dialogForm.form.spaceNumber"
            clearable></el-input></el-form-item>
        <el-form-item label="面积（㎡）" prop="areaProportion" class="area-proportion"><el-input
            v-model="dialogForm.form.areaProportion" clearable></el-input></el-form-item>
        <el-form-item label="计费规则" prop="ruleId">
          <el-select v-model="dialogForm.form.ruleId" placeholder="请选择" clearable>
            <el-option v-for="item in ruleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark" class="remark"><el-input v-model="dialogForm.form.remark" clearable
            type="textarea" :rows="2"></el-input></el-form-item>
      </el-card>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetForm">重置</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import CheckFormItem from '@/utils/checkElFormItemProp'
export default {
  name: 'AddAndEditAreaUI',
  props: {
    dialogForm: {
      type: Object,
      required: true,
      default: () => ({})
    },
    formItems: {
      type: Object,
      required: false,
      default: () => ({})
    }
  },
  data() {
    return {

    }
  },
  beforeCreate() {
    console.log('beforeCreate');
    this.ruleList = [{ id: 4, name: '分段计费' }, { id: 3, name: '按次收费' }, { id: 2, name: '按小时计费' }, { id: 1, name: '按分钟计费' }]
    this.rules = {
      areaName: [{ required: true, message: '区域名称不能为空', trigger: 'blur' }],
      spaceNumber: [{ required: true, validator: CheckFormItem.checkSpaceNumber, trigger: 'blur' }],
      areaProportion: [{ required: true, validator: CheckFormItem.checkAreaProportion, trigger: 'blur' }],
      ruleId: [{ required: true, message: '请选择计费规则', trigger: 'change' }],
      remark: [{ required: false, trigger: 'blur' }],
    }
  },
  created() {
    console.log('created');
  },
  methods: {
    resetForm() {
      this.$refs.AddAndEditAreaUIRef.clearValidate()//移除校验
      this.$emit('resetForm')
    },
    confirm() {
      this.$refs.AddAndEditAreaUIRef.validate((valid) => {
        if (valid) {
          this.dialogForm.dialogVisible = false
          this.$emit('comfirmForm')
          return
        }
        return false;
      });

    },
  },
  computed: {},
  watch: {
    'dialogForm.dialogVisible': {
      handler(value) {
        if (value) {
          this.$nextTick(() => {
            this.$refs.AddAndEditAreaUIRef.clearValidate()//打开就移除校验
          })
        }
      }
    }
  }
}
</script>

<style lang="scss">
.add-and-edit-area-ui {
  .el-dialog__title {
    display: block;
    text-align: left;
  }

  .el-dialog__body {
    background-color: #f5f6f8;

    .el-card__body {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, 62px);
      grid-auto-rows: 62px;

      .remark {
        grid-row: 3/4;
        grid-column: 1/-1;
        margin-bottom: 40px;
      }
    }

  }
}
</style>